<template>
    <div class="img">
        <div style="height:1px;"></div>
        <div class="login">
            <el-form :model="userForm" :rules="userRules" ref="userForm" label-position="left" label-width="0px" class="demo-ruleForm login-container">
                <h3 class="title">学科竞赛管理系统</h3>
                <el-form-item prop="account">
                    <el-input type="text" v-model="ruleForm2.account" auto-complete="off" placeholder="账号"></el-input>
                </el-form-item>
                <el-form-item prop="checkPass">
                    <el-input type="password" v-model="ruleForm2.checkPass" auto-complete="off" placeholder="密码"></el-input>
                </el-form-item>
                <el-form-item style="width:100%;">
                    <el-button type="primary" style="width:100%;" @click.native.prevent="handleSubmit2" :loading="logining">登录</el-button>
                    <p style="color: #000;">已有账号？<el-button type="text" @click="toLogin">马上登录</el-button> </p>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
    export default {
        created() {
            var _this = this;
            // 回车键监听
            document.onkeydown = function(e) {
                var key = window.event.keyCode;
                if (key == 13) {
                    _this.handleSubmit2();
                }
            }
        },
        data() {
            return {
                logining: false,
                userForm: {
                    userName: '',
                    password: '',
                    surePassword:"",
                },
                userRules: {
                    userName: [
                        { required: true, message: '请输入用户名', trigger: 'blur' },
                    ],
                    password: [
                        { required: true, message: '请输入密码', trigger: 'blur' },
                    ],
                    surePassword: [
                        { required: true, message: '请确认密码', trigger: 'blur' },
                    ]
                },
                checked: true
            };
        },
    }
</script>

<style scoped>


    @import "../../static/css/bootstrap.min.css";
    @import "../../static/css/login.css";

    .img{
        background: url('../../static/images/logo_bg.jpg') left center no-repeat;
        position:fixed;
        background-position:center top;
        background-size: 100% 100%;
        width:100%;
        height:100%;
        perspective:500px;;
    }
    .login-container {
        /*box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);*/
        -webkit-border-radius: 5px;
        border-radius: 5px;
        -moz-border-radius: 5px;
        background-clip: padding-box;
        margin: 180px auto;
        width: 350px;
        padding: 35px 35px 15px 35px;
        background: #fff;
        border: 1px solid #eaeaea;
        box-shadow: 0 0 25px #cac6c6;

    }

    .title {
        margin: 0px auto 40px auto;
        text-align: center;
        color: #505458;
    }

</style>
